<template>
  <div class="good"  >
    <image class="img" :src="tp" mode=""/>
    <div class="goods"   v-for="(item,index) in list" :key="item.id">
      <div class="title">{{item.name}}</div>
      <div class="list flex">
        <div class="item flex_c" @click="toDetail" :data-categoryType="it.categoryType" :data-subCategoryId="it.id" :data-categoryId="item.id" v-for="(it,index) in item.categoryList" :key="it.id">
          <image class="img" :src="it.wapBannerUrl" mode="widthFix"/>
          <div class="subtitle">{{it.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">


//点击商品的回调
const toDetail = (e:any)=>{
  console.log(props.list);
  console.log(e.currentTarget.dataset);

  let data = e.currentTarget.dataset
  // let data = {categoryType: ,subCategoryId: ,categoryId: ,}
  console.log(data);
  uni.navigateTo({
    url: '/pages/detail/detail'
  })
}

//接受父组件传递的参数
let props = defineProps(['list','tp'])
</script>

<style scoped lang="less">
.good{
  width: 100%;
  .img{
    width: 100%;
    height: 200rpx;
  }
  .goods{
    width: 100%;
    .title{
      font-weight: 900;
      margin: 20rpx;
    }
    .list{
      border-top: 1px solid #ccc;
      flex-wrap: wrap;
      .item{
        width: 33%;
        align-items: center;
        .img{
          width: 160rpx;
        }
        .subtitle{
          font-size: 28rpx;
        }
      }
    }
  }
}

</style>